<script setup lang="ts">
/**
 * vue3 下 scroll-view h5 无法获取响应式数据，兼容改成按钮式
 */
import { computed, ref, toRefs } from "vue";
interface Props {
  total: Number;
  loading: uniloadingFace;
}

const emits = defineEmits(["onRefresh", "reachBottom"]);
const contentText=computed(()=>{
  let contentdown='上拉显示更多'
  /* #ifdef H5  */
  contentdown='点击加载更多'
  /* #endif */
   return {
    contentdown
   }
})
const {  loading } = defineProps<Props>();
const triggered = ref<boolean>(false);
const refreshing = ref(false);

const handleReachBottom = () => {
  emits("reachBottom");
};

const handleOnRefresh = () => {
  if (refreshing.value) return;
  triggered.value = true;
  refreshing.value = true;
  emits("onRefresh");
  setTimeout(() => {
    triggered.value = false;
    refreshing.value = false;
  }, 1000);
};
function onRestore() {
  triggered.value = true;
}
</script>

<template>
  <!-- #ifdef MP-WEIXIN -->
  <scroll-view
    refresher-enabled
    @refresherrefresh="handleOnRefresh"
    scroll-y
    class="scrollView"
    :refresher-triggered="triggered"
    @refresherrestore="onRestore"
    @scrolltolower="handleReachBottom"

  >
    <!-- #endif -->
    <!-- #ifdef H5 -->
    <div class="scrollView">
      <!-- #endif -->

      <slot></slot>

      <uni-load-more
        @click="handleReachBottom"
        style="width: 100%"
        :status="loading"
        :contentText="contentText"
      ></uni-load-more>
      <!-- #ifdef H5 -->
    </div>
    <!-- #endif -->
    <!-- #ifdef MP-WEIXIN -->
  </scroll-view>
  <!-- #endif -->
</template>

<style lang="scss" scoped>
.scrollView {
  height: 100%;
  overflow-y: auto;
}
</style>
